<template>
  <div id="home">
    <img class="bgImage" :src="pageImg" />
  	<div class="home_input">
      <input v-model="textName" maxlength="6"/>
    </div>
    <div class="check">
      <div @click="manClick" v-bind:style="{backgroundImage:'url(' + manBg + ')'}">男生</div>
      <div @click="womClick" v-bind:style="{backgroundImage:'url(' + womBg + ')'}">女生</div>
    </div>
    <div @click="shengcBtnClick" class="btn"></div>
    <div class="modal" v-if="isShow">
      <div class="modal-body">
        <div class="text">{{modalText}}</div>
        <div @click="okBtnClick" class="okBtn">确定</div>
      </div>
    </div>
    <!-- <share></share> -->
  </div>
</template>

<script>
// import Share from '@/components/common/share.vue'
export default {
  name: 'home',
  data () {
    return {
        userInfo: {},
        pageImg: require('../../assets/images/bg_index2.jpg'),
        bgImage1: require('../../assets/images/icon_check.png'),
        bgImage2: require('../../assets/images/icon_checked.png'),
        manBg: '',
        womBg: '',
        isMan: 1, // 1：男生 2：女生
        textName: '', // 用户输入的名字
        isShow: false, // true: 显示弹框  false: 不显示
        modalText: '请输入您的名字',
    }
  },
  // components: {
  //   Share
  // },
  mounted() {},
  activated(){
    this.wx_config();
    this.manBg = this.bgImage2;
    this.womBg = this.bgImage1;
    this.$utils.shareImage = 'http://pbwbtivl9.bkt.clouddn.com/bg_index2.jpg';
  },
   methods: {
     // 微信配置
    wx_config: function(){
      var self = this;
      var pageUrl = self.$utils.getBaseUrl();
      self.$axios.get('wx_config',{
        params: {
          pageUrl: pageUrl
        }
      }).then(function (res){
      	 var data = res.data;
        wx.config({
          debug: false,
          appId: data.appId,
          timestamp: data.timestamp,
          nonceStr: data.nonceStr,
          signature: data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
        });
        wx.ready(function(){
          console.log('ready')
          // 微信好友分享
          wx.onMenuShareAppMessage(self.$utils.shareData);
          // 朋友圈分享
          wx.onMenuShareTimeline(self.$utils.shareData);
          wx.error(function(res){
    		    console.log('失败');
          });
        });
      }).catch(function (error) {

      });
  	},
    // 生成按钮点击事件
    shengcBtnClick: function(){
      this.textName = this.removeAllSpace(this.textName);
      this.$utils.sex = this.isMan;
      if (this.textName.length == 0) {
        alert('请输入您的名字');
      } else {
        localStorage.setItem('textName',this.textName);
        localStorage.setItem('isMan',this.isMan);
        this.$router.push('/bishu');
      }
    },
    // 确定按钮点击事件
    okBtnClick: function(){
      this.isShow = false;
    },
    removeAllSpace: function(str) {
     return str.replace(/\s+/g, "");
    },
    // 男士按钮点击事件
    manClick: function(){
      this.manBg = this.bgImage2;
      this.womBg = this.bgImage1;
      this.isMan = 1;
    },
     // 女士按钮点击事件
    womClick: function(){
      this.manBg = this.bgImage1;
      this.womBg = this.bgImage2;
      this.isMan = 2;
    },
  },
}
</script>
<style scoped lang="less">
#home{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  // background-image: url(../../assets/images/bg_index2.jpg);
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // background-position: center center;
  .bgImage{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
}
.home_input{
  background-image: url(../../assets/images/icon_input.png);
  background-repeat: no-repeat;
  background-size: 480px 131px;
  background-position: center center;
  width: 480px;
  height: 131px;
  margin: 580px auto 0;
  z-index: 100;
  position: absolute;
  left: 135px;
  input{
    background-color: transparent;
    outline: none;
    border: none;
    width: 360px;
    height: 80px;
    line-height: 80px;
    margin: 20px 20px 30px;
    padding: 0 40px;
    font-size: 40px
  }
}
.check {
  text-align: center;
  margin-top: 40px;
  z-index: 100;
  position: absolute;
  margin: 740px auto 0;
  width: 600px;
  margin-left: 75px;
  div{
    display: inline-table;
    padding-left: 90px;
    height: 70px;
    line-height: 70px;
    font-family: SourceHanSansCN-Medium;
    font-size: 48px;
    font-weight: normal;
    background-repeat: no-repeat;
    background-size: 72px 70px;
    background-position: left center;
  }
}
.btn{
  z-index: 100;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 300px 79px;
  background-position: left center;
  background-image: url(../../assets/images/btn_shengc.png);
  width: 300px;
  height: 79px;
  margin: 120px auto 0;
  top: 900px;
  left: 225px;
}
.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 500px;
    height: 300px;
    background-color: white;
    border-radius: 12px;
    margin: 380px auto 0;
    text-align: center;
    font-size: 40px;
    color: #333333;
    .text{
      padding-top: 80px;
    }
    .okBtn{
      width: 180px;
      height: 80px;
      line-height: 80px;
      margin: 40px auto 0;
      background-color: #1AAD19;
      border-radius: 12px;
      color: white;
    }
  }
}
</style>
